<template>
    <input type="text" v-model="user.name">
    <input type="text" v-model="user.age" >
</template>
<script>
export default {
    data() {
        return {
           /**
            * watch:{
            *   "被侦听的属性"(newVal,oldVal){
            * }
            * }
            * watch深度侦听
            * "要侦听的属性名":{
            * 立即执行: immediate: true, 就页面打开立即就会执行
            * 深度侦听复杂类型的变化:deep:true,
            * handler(newVal,oldVal){}
            * }
            */
            name: '',
            user: {
                name: '',
                age:0
            }
        };
    },
    watch: {
        // name(newVal, oldVal) {
        //     console.log("newVal:",newVal,"oldVal",oldVal);
        // }
            // 深度侦听
        user: {
            handler(newVal, oldVal) {
                console.log("newVal:", newVal, " oldVal: ", oldVal);
            },
            deep: true,
            immediate: true
        }
    }
}


</script>